<script src="/js/knockout.address.js" type="text/javascript"></script>
<div class="cat">
            <img style="vertical-align: top" src="/images/mgen/icon/pastille.png"/><h1><?php echo __('Personnages') ?></h1>
</div>
<!-- Cats -->
<ul class="pills" data-bind="template: {name: 'catTemplate', foreach: cats}"></ul>
<script type="text/html" id="catTemplate">
    <li data-bind="css: {active: $data == ficheViewModel.selectedCat()}, click: function(){ ficheViewModel.selectCat($data)}">
        <a href="#">${$data}</a>
    </li>
</script>

<!-- Fiche grid -->
<div id="character-list" data-bind="template: {name: 'ficheGridRow', foreach: currentPageFiche}">    
</div>
<script type="text/html" id="ficheGridRow">
    <div class="list-cadre">
        <div class="lf"></div>
        <div class="repeat">
            <div>
                <div title="${fiche_state_label}" class="icon ${fiche_state}"></div>
            </div>
            <div class="col-6">
                <a href="${fiche_link}">${character_pseudo}</a>
            </div>
            <div class="col-6">
                <a href="${player_link}">${player_pseudo}</a>
            </div>
            <div class="col-6">
                ${created_at}
            </div>
            <div>
                <div title="${update_state_label}" class="icon ${update_state}"></div>
                
            </div>

        </div>
        <div class="rg"></div>
    </div>
    <br/>
</script>
<script src="/js/MVVM/knockout.fiche-list.js" type="text/javascript"></script>